<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <table cellpadding="5" style="margin-left: 30px" id="itemParamAddTable" class="itemParam">
	<tr class="hide addGroupTr">
		<td>规格参数:</td>
		<td>
			<ul>
				<li><a href="javascript:void(0)" class="easyui-linkbutton addGroup">添加分组</a></li>
			</ul>
		</td>
	</tr>
	<tr>
		<td></td>
		<td>
			<a href="javascript:void(0)" class="easyui-linkbutton submit">提交</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton close">关闭</a>
		</td>
	</tr>
</table>
    <div  class="itemParamAddTemplate" style="display: none;">
	<li class="param">
		<ul>
			<li>
				<input class="easyui-textbox" style="width: 150px;" name="group"/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton addParam"  title="添加参数" data-options="plain:true,iconCls:'icon-add'"></a>
			</li>
			<li>
				<span>|-------</span><input  style="width: 150px;" class="easyui-textbox" name="param"/>&nbsp;<a href="javascript:void(0)" class="easyui-linkbutton delParam" title="删除" data-options="plain:true,iconCls:'icon-cancel'"></a>						
			</li>
		</ul>
	</li>
</div>
<script type="text/javascript">
$(function(){
	/*  父页面表格的第一行数据 */
	var param=$('#formatData').datagrid('getRows')[0];
	var paramDataJson=$.parseJSON( param.gfParamData );//json格式的规格数据
	//getJsonObjLength(paramDataJson);//获取json格式数据的长度
	$.each(paramDataJson, function(idx, obj) {
		var initTemple = $(".itemParamAddTemplate li").eq(0).clone();//最初的模板保存
		
		$(".itemParamAddTemplate [name=group]").val(obj.group);//给模板赋值规格分组名
		var paramChildDataJson=obj.params;//获取当前循环次数的子规格数据
		 $.each(paramChildDataJson, function(index, paramChildobj) {
				 if(index==0){
					 $(".itemParamAddTemplate [name=param]").val(eval(paramChildDataJson)[0]); //赋值第一个子规则
				 }else{
					 var temp=$(".itemParamAddTemplate li").eq(2).clone();//克隆第一个子规则
					 $(".param ul").eq(idx).append(temp );//添加一个子规则到当前循环的模板上
					 
					 ($(".itemParamAddTemplate [name=param]").eq(index)).val(eval(paramChildDataJson)[index]);//给添加的子规则赋值
				 }
		 });
		 var tempCopy=$(".itemParamAddTemplate li").eq(0).clone();//获得修改好的模板
		  $(".addGroup").parent().parent().append(tempCopy);//添加到我们需要的地方
		  $(".itemParamAddTemplate").html("");//删除修改后的模板
		  $(".itemParamAddTemplate").append(initTemple);//添加最初的模板
		 tempCopy.find(".addParam").click(function(){
			  var li = $(".itemParamAddTemplate li").eq(2).clone();
			  li.find(".delParam").click(function(){
				  $(this).parent().remove();
			  });
			  li.appendTo($(this).parentsUntil("ul").parent());
		  });
		  tempCopy.find(".delParam").click(function(){
			  $(this).parent().remove();
		  }); 
	});
	
	$(".addGroup").click(function(){
		  var temple = $(".itemParamAddTemplate li").eq(0).clone();
		  $(this).parent().parent().append(temple);
		  temple.find(".addParam").click(function(){
			  var li = $(".itemParamAddTemplate li").eq(2).clone();
			  li.find(".delParam").click(function(){
				  $(this).parent().remove();
			  });
			  li.appendTo($(this).parentsUntil("ul").parent());
		  });
		  temple.find(".delParam").click(function(){
			  $(this).parent().remove();
		  });
	});
	$("#itemParamAddTable .close").click(function(){
		$(".panel-tool-close").click();
	});
			$("#itemParamAddTable .submit").click(function(){
				var params = [];
				var groups = $("#itemParamAddTable [name=group]");
				groups.each(function(i,e){
					var p = $(e).parentsUntil("ul").parent().find("[name=param]");
					var _ps = [];
					p.each(function(_i,_e){
						var _val = $(_e).siblings("input").val();
						if($.trim(_val).length>0){
							_ps.push(_val);						
						}
					});
					var _val = $(e).siblings("input").val();
					if($.trim(_val).length>0 && _ps.length > 0){
						params.push({
							"group":_val,
							"params":_ps
						});					
					}
				});
				var url = "format/updateFormatParam/"+param.gfId;
				$.post(url,{"paramData":JSON.stringify(params)},function(data){
					if(data.status == 200){
						$.messager.alert('提示','更新商品规格成功!',undefined,function(){
							$(".panel-tool-close").click();
	    					$("#formatData").datagrid("reload");
	    				});
					}else if(data.status==403){
						$.messager.alert('提示','提交参数错误!','info');
					}
				});
			});
	
});


</script>